<template>
    <div>
        <el-cascader :placeholder="placeholder" :show-all-levels="showAllLevels"
                     :options="regionList" v-model="citySelection"
                     clearable @change="citySelectionChange" ref="citySelection" style="width: 100%;"></el-cascader>
    </div>
</template>

<script>
import {treeByArea} from '@/api/system/dept.js'

export default {
    name: 'ProvinceCity',
    model: {
        prop: 'value',
        event: 'dataChange'
    },
    props: {
        value: {
            type: Array,
            default() {
                return []
            }
        },
        placeholder: {
            type: String,
            default: '请选择'
        },

        showAllLevels: {
            type: Boolean,
            default: true
        },
    },


    data() {
        return {
            regionList:[],
            citySelection: [],
        }
    },
    watch: {
        value: {
            handler(val) {
                this.citySelection = val
            },
            deep: true,
            immediate:true
        },

    },
    mounted() {
        this.getData()
    },
    methods: {

        getData(){
            treeByArea({
                regionLevel:2,//显示级别 1省 2省市 3省市区 ；为空默认3
                areaId:null //区域id；为空默认全国
            }).then(res=>{
                res.data = res.data.map(item=>{
                    item.children = item.children.map(citem=>{
                        citem.children = null
                        return citem
                    })
                    return item
                })
                this.regionList = res.data
            })
        },

        citySelectionChange(val) {

            if (val) {
                this.$emit('change', this.$refs.citySelection.getCheckedNodes(true))
            } else {
                this.$emit('change', val)
            }

            // console.log(this.$refs.citySelection.getCheckedNodes(true));
            // this.$emit('dataChange', )
        },
    }
}

</script>

<style lang="scss" scoped></style>
